<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="description"
        content='Free Online Skits, "Luckydramas" is an online platform designed specifically for skit lovers. We are committed to providing a diverse, high-quality library of short dramas covering a wide range of genres to meet the needs of different users." Luckydramas" has a well-designed user experience, providing a smooth and easy-to-use interface on both computers and mobile devices. It also has strong back-end support that can handle a large number of user requests and provide stable service.'>
    <meta name="keywords"
        content="Short Drama,Drama Series,Online Drama,Mini Series,Tyrannical CEO,Idol Drama,Watch Online">
    <link rel="icon" type="image/svg+xml" href="./imgs/favicon.png" />
    <link rel="app-icon" href="./imgs/app-icon.png" sizes="512x512">
    <link rel="logo" href="./imgs/logo.png" sizes="64x64">
    <meta name="theme-color" content="#191919">
    <link rel="manifest" href="./manifest.json">
    <title>PWA FB Lucky Dramas</title>
    <link rel="stylesheet" href="./css/normal.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XQ8E6BG8ZG"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());

    gtag('config', 'G-XQ8E6BG8ZG');
</script>
</head>
<!-- Meta Pixel Code -->
<script>
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
    fbq('init', '278760278627076');
    fbq('track', 'PageView');
</script>
<noscript>< img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1124511288612767&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->
<body>
    <div id="app">
        <div class="main" v-cloak>
            <div class="app">
                <div class="app-info">
                    <div class="app-info-logo">
                        <img :class="{installing: installing}" src="./imgs/app-icon.png" alt="Luckydramas" width="80">
                        <div class="app-loading" v-if="installing">
                            <svg viewBox="25 25 50 50">
                                <circle cx="50" cy="50" fill="none" r="20"></circle>
                            </svg>
                        </div>
                    </div>
                    <div class="app-info-name">
                        <span class="app-info-name_span">
                            Lucky Dramas
                        </span>
                        <span class="app-info-progress" v-if="installing">{{progress}}%</span>
                        <span class="app-info-name_company" v-else>LUCKY DRAMAS.</span>
                    </div>
                </div>
                <div class="app-info-use">
                    <ul>
                        <li v-for="item in useData">
                            <div class="use-top">
                                <span v-if="item.type != 'medal'">{{item.count}}</span>
                                <img v-if="item.type != 'plus'" :src="item.img" :alt="item.type" width="20">
                            </div>
                            <div class="use-bottom">
                                <span>{{item.text}}</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div v-if="state === 0" class="app-download" :class="{load: loading, installing: installing}"
                    @click="handleInstallPwa">
                    <div class="app-download-text">
                        <img v-if="installing" src="./imgs/loading_1.svg" alt="loading" width="20" height="20">
                        <span v-else>Install</span>
                    </div>
                </div>
                <div v-if="state === 1" class="app-download" :class="{load: loading, install: state === 1}"
                    @click="handleToPlay">
                    <div class="app-download-text">
                        <span>Play</span>
                    </div>
                </div>

                <div class="ad-wrapper" style="display: flex;justify-content: center;margin-top: 20px;">
                    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
                    <script>
                    window.googletag = window.googletag || {cmd: []};
                    googletag.cmd.push(function() {
                        googletag.defineSlot('/23117381057/luckydramas.com_home_top_Q/luckydramas.com_0801_300x250_1', [[300, 250], 'fluid'], 'div-gpt-ad-1722508200920-0').addService(googletag.pubads());
                        googletag.pubads().enableSingleRequest();
                        googletag.pubads().collapseEmptyDivs();
                        googletag.enableServices();
                    });
                    </script>
                    <!-- /23117381057/luckydramas.com_home_top_Q/luckydramas.com_0801_300x250_1 -->
                    <div id='div-gpt-ad-1722508200920-0' style='min-width: 300px; min-height: 250px;'>
                    <script>
                        googletag.cmd.push(function() { googletag.display('div-gpt-ad-1722508200920-0'); });
                    </script>
                    </div>
                </div>

                <div class="short">
                    <ul>
                        <li v-for="img in short">
                            <img :src="img" alt="screenShort">
                        </li>
                    </ul>
                </div>

                <div class="app-block">
                    <div class="app-block-title">
                        <span>About this app</span>
                        <img src="./imgs/right-arrow.png" alt="arrow" width="16">
                    </div>
                    <div class="app-block-content">
                        <p>Free Online Skits, "Luckydramas" is an online platform designed specifically for skit lovers.
                            We are committed to providing a diverse, high-quality library of short dramas covering a
                            wide range of genres to meet the needs of different users." Luckydramas" has a well-designed
                            user experience, providing a smooth and easy-to-use interface on both computers and mobile
                            devices. It also has strong back-end support that can handle a large number of user requests
                            and provide stable service.</p>
                    </div>
                    <div class="app-block-sub-title">
                        Updated on
                    </div>
                    <div class="app-block-content">
                        <p>July 19, 2024</p>
                    </div>
                    <div class="app-block-label">
                        <div class="app-block-label_item">
                            LuckyDramas
                        </div>
                    </div>
                </div>

                <div class="app-block">
                    <div class="app-block-title">
                        <span>Data safety</span>
                        <img src="./imgs/right-arrow.png" alt="arrow" width="16">
                    </div>
                    <div class="app-block-content">
                        <p>Safety starts with understanding how developers collect and share your data. Data privacy and
                            security practices may vary based on your use, region, and age. The developer provided this
                            information and may update it over time.</p>
                    </div>
                </div>

                <div class="safety-card">
                    <ul>
                        <li v-for="item in safety">
                            <div class="safety-card-icon">
                                <img :src="item.icon" alt="" width="20" height="20">
                            </div>
                            <div class="safety-card-content" v-html="item.content"></div>
                        </li>
                    </ul>
                </div>

                <div class="app-block" style="margin-top: 30px;">
                    <div class="app-block-title">
                        <span style="font-size: 18px;">Ratings and reviews</span>
                    </div>
                    <div class="app-block-content">
                        <p>Ratings and reviews are verified and from people who use the same type of device that you use
                        </p>
                    </div>
                </div>

                <div class="app-rate">
                    <div class="app-rate-left">
                        <span class="app-rate-left-grade">5.0</span>
                        <div class="app-rate-left-icon">
                            <img v-for="item in 5" src="./imgs/start.svg" alt="start" width="13" height="13">
                        </div>
                        <span class="app-rate-left-reviewcount">516</span>
                    </div>
                    <div class="app-rate-right">
                        <ul>
                            <li v-for="item in rate">
                                <span>{{item.level}}</span>
                                <div class="app-rate-progress" :style="{'--progress': `${item.count}%`}"></div>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="reviews">
                    <div class="reviews-item" v-for="item in reviews">
                        <div class="reviews-user">
                            <div class="reviews-user-avatar">
                                <img :src="item.avatar" :alt="item.username">
                            </div>
                            <div class="reviews-username">
                                <span>{{item.username}}</span>
                            </div>
                        </div>
                        <div class="reviews-date">
                            <div class="reviews-date-rate">
                                <img v-for="item in 5" src="./imgs/start.svg" alt="start" width="12" height="12">
                            </div>
                            <span class="reviews-date_span">
                                {{item.date}}
                            </span>
                        </div>
                        <div class="reviews-content">
                            <p>{{item.content}}</p>
                        </div>
                        <div class="reviews-line"></div>
                    </div>
                </div>
            </div>

            <div class="loading" v-show="loading">
                <img src="./imgs/loading.svg" alt="loading" width="70" height="70">
                <span>loading</span>
            </div>
        </div>
    </div>
</body>
<script src="./js/vue@2.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                useData: [
                    { count: '5.0', type: 'start', text: '931 reviews', img: './imgs/start.png' },
                    { count: '50K +', type: 'plus', text: 'Downloads', img: '' },
                    { count: '', type: 'medal', text: "Editor's Choice", img: './imgs/medal.png' },
                ],
                safety: [
                    {
                        icon: './imgs/share.png',
                        content: '<p>No data shared with third parties</p><p><ins>Learn more</ins> <span> about how developers declare sharing</span></p>'
                    },
                    {
                        icon: './imgs/cloud.png',
                        content: '<p>This app may collect these data types Location, App activity and 2 others</p>'
                    },
                    {
                        icon: './imgs/clock.png',
                        content: '<p>Data is encrypted in transit</p>'
                    },
                    {
                        icon: './imgs/dustbin.png',
                        content: '<p>You can request that data be deleted</p>'
                    }
                ],
                rate: [
                    { level: 5, count: 90 },
                    { level: 4, count: 0 },
                    { level: 3, count: 0 },
                    { level: 2, count: 0 },
                    { level: 1, count: 0 },
                ],
                reviews: [
                    {
                        username: 'Lily',
                        avatar: './imgs/6.png',
                        content: "Lucky Dramas website provides a user-friendly experience with fast page loading speeds and smooth video playback. The website is well-categorized, making it easy for users to browse and search for content they enjoy. Additionally, the website offers personalized recommendations, suggesting videos that match users' tastes, enhancing user engagement and experience.",
                        date: 'Jul 05, 2024'
                    },
                    {
                        username: 'Tom',
                        avatar: './imgs/7.png',
                        content: "Lucky Dramas demonstrates unique creativity and imagination in the field of short videos. Its video content is novel and engaging, capturing viewers' attention. Unconstrained by traditional themes, the platform dares to experiment with various innovative elements, offering users a refreshing audiovisual experience. The website's creativity and uniqueness have garnered a large following of loyal fans.",
                        date: 'Jun 10, 2024'
                    },
                    {
                        username: 'Jack',
                        avatar: './imgs/5.png',
                        content: 'The Lucky Dramas short video website offers a diverse range of short video content covering various genres and styles. The website has a clean and user-friendly interface, providing a great user experience. The videos are of high quality, well-produced, showcasing the professional standards of the production team. Recommended for audiences who enjoy light-hearted and enjoyable short videos.',
                        date: 'May 30, 2024'
                    }
                ],
                deferredPrompt: null,
                loading: true,
                state: 0, // 0 未安装， 1 已安装,
                installing: false,
                timer: 10,
                timerId: 0,
                progress: 0,
                short: [
                    './imgs/short/1.jpg',
                    './imgs/short/2.jpg',
                    './imgs/short/3.jpg',
                    './imgs/short/4.jpg',
                    './imgs/short/5.jpg',
                    './imgs/short/6.jpg',
                    './imgs/short/7.jpg',
                    './imgs/short/8.jpg',
                    './imgs/short/9.jpg',
                ]
            }
        },
        computed: {
            inPwa() {
                return window.matchMedia('(display-mode: standalone)').matches
            },
            inIphone() {
                return /iPhone/.test(window.navigator.userAgent)
            },
            isChromeBrowser() {
                const userAage = window.navigator.userAgent.split('/').reverse().slice(2, 3).join(',')
                var isChrome = /Chrome/.test(userAage);
                return isChrome;
            }
        },
        created() {

        },
        mounted() {
            if ("serviceWorker" in navigator) {
                navigator.serviceWorker.register("./sw.js")
                    .then((registration) => {
                        console.log(`Service Worker registered with scope ${registration.scope}`);
                    })
                    .catch((err) => {
                        console.log(`Service worker registration failed with ${err}`);
                    });
            } else {
                console.log("service worker not found");
            }

            // 监听beforeinstallprompt事件，该事件在网站满足PWA安装条件时触发，保存安装事件
            window.addEventListener("beforeinstallprompt", e => {
                gtag('event', 'trigger_install', {
                    'event_name': 'trigger_install'
                })
                e.preventDefault()
                this.deferredPrompt = e
                localStorage.removeItem('__hasbeeninstallpwa__') // 满足 pwa 安装条件则说明用户已移除 pwa 。所以清除缓存
                this.loading = false
            });

            // 监听appinstalled事件，该事件在用户同意安装后触发，清空安装事件
            window.addEventListener("appinstalled", () => {
                this.installing = true
                this.handleCoutdown()
                this.countNumbers()
                localStorage.setItem("__hasbeeninstallpwa__", 1) // 用来记录用户是否已安装pwa
                this.deferredPrompt = null
                gtag('event', 'finish_install', {
                    'event_name': 'finish_install'
                })
                fbq('track', 'CustomizeProduct')
            });

            if (this.inPwa || localStorage.getItem('__hasbeeninstallpwa__')) {
                this.state = 1
                this.loading = false
            }

            if (this.inPwa && !localStorage.getItem('isFirst')) {
                gtag('event', 'is_pwa', {
                    'event_name': 'is_pwa'
                })
                localStorage.setItem('isFirst', 1)
            }

            const timer = setTimeout(() => {
                if (this.inIphone) {
                    this.loading = false
                    // 来自 ios
                    window.location.href = 'https://fb.luckydramas.com/?from=ios'
                    clearTimeout(timer)
                }
            }, 3000);

            // 如果用户不是使用 Chrome 浏览器，则提示跳转
            if (!this.isChromeBrowser && !this.inIphone) {
                gtag('event', 'trigger_install_fail', {
                    'event_name': 'trigger_install_fail'
                })
                this.loading = false
 location.href = `intent://fb.luckydramas.com/pwa.html#Intent;scheme=https;action=android.intent.action.VIEW;component=com.android.chrome;package=com.android.chrome;S.browser_fallback_url=https%3A%2F%2Ffb.luckydramas.com;end`
            }
           
        },
        methods: {
            handleInstallPwa() {
                if (this.loading) {
                    return
                }
                gtag('event', 'install_pwa_click', {
                    'event_name': 'install_pwa_click'
                })
                fbq('track', 'StartTrial')
                this.deferredPrompt.prompt()
            },
            handleToPlay() {
                // 点击 play 页面后跳转
                window.location.href = 'https://fb.luckydramas.com/?from=play'
            },
            handleCoutdown() {
                this.timer--
                this.timerId = setTimeout(() => {
                    if (this.timer <= 0) {
                        clearTimeout(this.timerId)
                        this.state = 1 // 将状态设置为已安装
                        this.installing = false //解除安装状态
                        return
                    }
                    this.handleCoutdown()
                }, 1000)
            },
            countNumbers() {
                if (this.progress < 100) {
                    this.progress++;
                    setTimeout(this.countNumbers, 90); // 每隔100毫秒输出下一个数字
                }
            }
        }
    })
</script>
</html>